<!DOCTYPE html>
<html class="no-js"  lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<!-- META DATA -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<!--font-family-->
		<link href="https://fonts.googleapis.com/css?family=Rufina:400,700" rel="stylesheet" />

		<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet" />

		<!-- TITLE OF SITE -->
		<title>预订</title>

		<!-- favicon img -->
		<link rel="shortcut icon" type="image/icon" href="../static/newcss/logo/favicon.png" th:href="@{/newcss/logo/favicon.png}"/>

		<!--font-awesome.min.css-->
		<link rel="stylesheet" href="../static/newcss/css/font-awesome.min.css" th:href="@{/newcss/css/font-awesome.min.css}"/>

		<!--animate.css-->
		<link rel="stylesheet" href="../static/newcss/css/animate.css" th:href="@{/newcss/css/animate.css}"/>

		<!--hover.css-->
		<link rel="stylesheet" href="../static/newcss/css/hover-min.css"th:href="@{/newcss/css/hover-min.css}">

		<!--datepicker.css-->
		<link rel="stylesheet"  href="../static/newcss/css/datepicker.css" th:href="@{/newcss/css/datepicker.css}">

		<!--owl.carousel.css-->
        <link rel="stylesheet" href="../static/newcss/css/owl.carousel.min.css"th:href="@{/newcss/css/owl.carousel.min.css}">
		<link rel="stylesheet" href="../static/newcss/css/owl.theme.default.min.css"th:href="@{/newcss/css/owl.theme.default.min.css}"/>

		<!-- range css-->
        <link rel="stylesheet" href="../static/newcss/css/jquery-ui.min.css" th:href="@{/newcss/css/jquery-ui.min.css}"/>

		<!--bootstrap.min.css-->
		<link rel="stylesheet" href="../static/newcss/css/bootstrap.min.css" th:href="@{/newcss/css/bootstrap.min.css}"/>

		<!-- bootsnav -->
		<link rel="stylesheet" href="../static/newcss/css/bootsnav.css"th:href="@{/newcss/css/bootsnav.css}"/>

		<!--style.css-->
		<link rel="stylesheet" href="../static/newcss/css/style.css" th:href="@{/newcss/css/style.css}"/>

		<!--responsive.css-->
		<link rel="stylesheet" href="../static/newcss/css/responsive.css" th:href="@{/newcss/css/responsive.css}"/>

		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" ></script>
		<![endif]-->

	</head>

	<body>
		<!--&lt;!&ndash;[if lte IE 9]>-->
		<!--<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a>upgrade-->
			<!--your browser</a> to improve your experience and security.</p>-->
		<!--<![endif]&ndash;&gt;-->

		<!-- main-menu Start -->
		<header class="top-area">
			<!--class="sticky-wrapper is-sticky"-->
			<div  class="sticky-wrapper" style="height: 78px;background-color: #2c4762">
				<div style="width: 1903px; position: fixed; top: 0px; z-index: inherit;background-color: #2c4762">
					<div class="container">
						<div class="row">
							<div class="col-sm-2">
								<div class="logo">
									<a href="/testdemo">
										Team<span>13</span>
									</a>
								</div><!-- /.logo-->
							</div><!-- /.col-->
							<div class="col-sm-10">
								<div class="main-menu">
									<!-- Brand and toggle get grouped for better mobile display -->
									<div class="navbar-header">
										<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
											<i class="fa fa-bars"></i>
										</button><!-- / button-->
									</div><!-- /.navbar-header-->
									<div class="collapse navbar-collapse">
										<ul class="nav navbar-nav navbar-right">
											<li ><a href="index">首页</a></li>

											<!--<li ><a   href="login" th:if="${session.user==null}">登录 </a></li>
											<li ><a    href="loginout" >注销 </a></li>
											<li class="smooth-menu"><a href="#pack">推荐酒店 </a></li>
											<li ><a href="manage" th:if="${session.user!=null}" th:text="${session.user.getUserName()}">个人中心 </a></li>
											<li class="smooth-menu"><a href="#footer">关于我们</a></li>
											<li>-->

											</li><!--/.project-btn-->
										</ul>
									</div><!-- /.navbar-collapse -->
								</div><!-- /.main-menu-->
							</div><!-- /.col-->
						</div><!-- /.row -->
						<div class="home-border"></div><!-- /.home-border-->
					</div><!-- /.container-->
				</div>
			</div>
			<!-- /.header-area -->

		</header><!-- /.top-area-->
		<!-- main-menu End -->

		<div>
			<div  style="height: 78px;">
			</div>
		</div>

		<!--搜索功能-->
		<section  class="travel-box" style="margin-top: 30px">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div >
							<div id="desc-tabs" class="desc-tabs">

								<ul class="nav nav-tabs" role="tablist">

									<li role="presentation" class="active">
										<a th:href="@{/map(Destination=${Destination},KeyWord=${KeyWord})}" ><!--地图跳转-->
											<!--<i class="fa fa-tree"></i>-->
											地图搜索
										</a>
									</li>

									<li role="presentation">
								</ul>
								<!--/.tab content-->
							</div><!--/.desc-tabs-->
						</div><!--/.single-travel-box-->
					</div><!--/.col-->
				</div><!--/.row-->
			</div><!--/.container-->

		</section><!--/.travel-box-->
		<!--travel-box end-->

		<!--酒店列表-->
		<section id="pack" class="packages" style="padding-bottom: 2px;padding-top: 30px;">
			<div class="container" >
				<div class="gallary-header text-center">
					<h2>
						搜索出的酒店
					</h2>
				</div><!--/.gallery-header-->
				<div class="packages-content" style="margin-top: 20px">
					<div class="row" >
						<div class="col-md-4 col-sm-6" th:if="${hotels!= null}" th:each="hotel:${hotels}">
							<div class="single-package-item">
								<img  src="../static/newcss/images/packages/p1.jpg" th:src="${hotel?.getPhoto1()}" alt="package-place" style="max-width:100%; height:300px">
								<div class="single-package-item-txt">
									<h3 th:text="${hotel?.getHotelTranslatedName()}"></h3>
									<div class="packages-para">
										<p>
											<span>
												<i th:if="${hotel.getNumberfloors()!=null}" th:text="${hotel?.getNumberfloors()}+'层高'" class="fa fa-angle-right"></i>
                                                <i th:if="${hotel.getNumberfloors()==null}" th:text="20+'层高'" class="fa fa-angle-right"></i>
											</span>
											<i th:text="${hotel?.getStarRating()}+'星级酒店'" class="fa fa-angle-right"></i>
										</p>
										<p>
											<span>
												<i th:text="${hotel?.getCity()}" class="fa fa-angle-right"></i>
												<!--<i th:text="${hotel.getH}" class="fa fa-angle-right"></i>-->

											</span>
                                            <i th:text="'消费标准:'+${hotel.getRatesFrom()}+'￥'" class="fa fa-angle-right"></i>
										 </p>
                                        </p>
									</div><!--/.packages-para-->
									<div class="packages-review">
										<p>
											<i th:each="i:${#numbers.sequence(1,hotel?.getStarRating())}" class="fa fa-star"></i>
											<span th:text="${hotel?.getNumberOfReviews()}+' 评论'">254 评论</span>
										</p>
									</div><!--/.packages-review-->
									<div class="about-btn">
										<!--<form action="/doSearch" method="get">-->
											<!--<input type="button" class="about-view packages-btn" value="立即订购" >-->
										<!--</form>-->
										<a th:href="@{/hotelinfo(hotelId=${hotel?.hotelId})}" class="btn about-view packages-btn" >立即订购</a>
									</div><!--/.about-btn-->
								</div><!--/.single-package-item-txt-->
							</div><!--/.single-package-item-->

						</div><!--/.col-->

					</div><!--/.row-->

				</div><!--/.packages-content-->
			</div><!--/.container-->
		</section><!--/.packages-->
		<!--packages end-->

		<!--&lt;!&ndash;分页&ndash;&gt;
		<div class="container" align="center" >
			<div class="row clearfix">
				<div class="col-md-12 column" th:if="${pageInfo != null}">
					<ul class="pagination pagination-lg">
						<li>
							<a href="#" th:if="${pageInfo.num!=0}" th:href="@{/doSearch(pageNum=1,resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">首页</a>
						</li>
						<li>
							<a href="#" th:if="${pageInfo.num>1}" th:href="@{/doSearch(pageNum=${pageInfo.num}-1,resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">上一页</a>
							<a href="#" th:if="${pageInfo.num<=1}" th:href="@{/doSearch(pageNum=1,resultPath='index',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">上一页</a>
						</li>
						<li>
							<a  th:if="${pageInfo.num >= 2}" th:href="@{/doSearch(pageNum=${pageInfo.num}-1,resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}" th:text="${pageInfo.num}-1">2</a>
						</li>
						<li>
							<a th:href="@{/doSearch(pageNum=${pageInfo.num},resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}" th:text="${pageInfo.num}">2</a>
						</li>
						<li>
							<a  th:if="${pageInfo.num < pageInfo.last}" th:href="@{/doSearch(pageNum=${pageInfo.num}+1,resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}" th:text="${pageInfo.num}+1">2</a>
						</li>
						<li>
							<a th:if="${pageInfo.num < pageInfo.last}" th:href="@{/doSearch(pageNum=${pageInfo.num}+1,resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">下一页</a>
							<a th:if="${pageInfo.num >= pageInfo.last}" th:href="@{/doSearch(pageNum=${pageInfo.num},resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">下一页</a>
						</li>
						<li>
							<a href="#" th:href="@{/doSearch(pageNum=${pageInfo.last},resultPath='search',hotelName=${hotelName},hotelCity=${hotelCity},starRating=${starRating})}">尾页</a>
						</li>
					</ul>
				</div>
			</div>
		</div>-->

		<!-- footer-copyright start -->
		<footer  id="footer" class="footer-copyright">
			<div class="container">
				<hr>
				<div class="foot-icons ">
		        	<p>&copy; 2019 <a href="#"></a>. All Right Reserved. <a href="" target="_blank" title="Team13">酒店管理系統</a> - Come from <a href="" title="Team13" target="_blank">Team15</a></p>

		        </div><!--/.foot-icons-->
				<div id="scroll-Top">
					<i class="fa fa-angle-double-up return-to-top" id="scroll-top2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
				</div><!--/.scroll-Top-->
			</div><!-- /.container-->

		</footer><!-- /.footer-copyright-->
		<!-- footer-copyright end -->




		<script src="../static/newcss/js/jquery.js" th:src="@{/newcss/js/jquery.js}"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->

		<!--modernizr.min.js-->
		<script  src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>


		<!--bootstrap.min.js-->
		<script  src="../static/newcss/js/bootstrap.min.js" th:src="@{/newcss/js/bootstrap.min.js}"></script>

		<!-- bootsnav js -->
		<script src="../static/newcss/js/bootsnav.js" th:src="@{/newcss/js/bootsnav.js}"></script>

		<!-- jquery.filterizr.min.js -->
		<script src="../static/newcss/js/jquery.filterizr.min.js" th:src="@{/newcss/js/jquery.filterizr.min.js}"></script>

		<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

		<!--jquery-ui.min.js-->
        <script src="../static/newcss/js/jquery-ui.min.js" th:src="@{/newcss/js/jquery-ui.min.js}"></script>

        <!-- counter js -->
		<script src="../static/newcss/js/jquery.counterup.min.js" th:src="@{/newcss/js/jquery.counterup.min.js}"></script>
		<script src="../static/newcss/js/waypoints.min.js" th:src="@{/newcss/js/waypoints.min.js}"></script>

		<!--owl.carousel.js-->
        <script  src="../static/newcss/js/owl.carousel.min.js" th:src="@{/newcss/js/owl.carousel.min.js}"></script>

        <!-- jquery.sticky.js -->
		<script src="../static/newcss/js/jquery.sticky.js" th:src="@{/newcss/js/jquery.sticky.js}"></script>

        <!--datepicker.js-->
        <script  src="../static/newcss/js/datepicker.js" th:src="@{/newcss/js/datepicker.js}"></script>

		<!--Custom JS-->
		<script src="../static/newcss/js/custom.js" th:src="@{/newcss/js/custom.js}"></script>
	<script>
        // function searchHotel(){
        //     var hotelCity = $('input[name=hotelCity]').val();
        //     var hotelName = $('input[name=hotelName]').val();
        //     url = '/doSearch?resultPath=search&hotelCity='+hotelCity+'&hotelName='+hotelName;
        //     window.location.href = url;
        // }
	</script>

	</body>

</html>